
import React,{Fragment} from 'react'
import styles from "./index.module.css";
import {Modal,Alert,Checkbox,Row,Col,Message} from 'antd'
import Store from "./Store";
import lds from 'lodash'
import {observer} from 'mobx-react'
import {Assignment} from "../../../api/system/role/RoleApi";
const CheckboxGroup = Checkbox.Group;

@observer
class AdminPermissionForm1 extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        Store.initAllPermissions();
        Store.initPermissions();
    }


    handlePermCheck = (mod, page, perm,sub_type) => {

        if (!Store.permissions.hasOwnProperty(mod)){
            Store.permissions[mod] = {};
        }
        if (!Store.permissions[mod].hasOwnProperty(page)){
            Store.permissions[mod][page] = {"perms":[]};
        }

        Store.permissions[mod][page]["sub_type"] = sub_type;

        const perms = Store.permissions[mod][page]["perms"];

        if (perms.includes(perm)) {
            perms.splice(perms.indexOf(perm), 1)
        } else {
            perms.push(perm)
        }
    };

    handleAllCheck = (e, mod, page,sub_type) => {

        const checked = e.target.checked;

        if (!Store.permissions.hasOwnProperty(mod)){
            Store.permissions[mod] = {};
        }

        if (checked) {
            Store.permissions[mod][page] = lds.clone(Store.allPermissionsMap[mod][page])
        } else {
            Store.permissions[mod][page] = {perms:[],sub_type:sub_type};
        }

    };

    handleChecked = (mod,page,perm) => {

        if (Store.permissions.hasOwnProperty(mod) && Store.permissions[mod].hasOwnProperty(page) && Store.permissions[mod][page]["perms"].includes(perm)){
            return true;
        }
        return false;
    };

    PermBox = observer(({mod, page, perm, children,sub_type}) => (
        <Checkbox
            value={perm}
            onChange={(e) => this.handlePermCheck(mod, page, perm,sub_type,e)}
            checked={this.handleChecked(mod,page,perm)}
        >
            {children}
        </Checkbox>
    ));


    handleSubmit = () => {
        Assignment({id:Store.record.id,permissions:JSON.stringify(Store.permissions)}).then(response => {
            if (response.data.code === 200){
                Message.success(response.data.msg);
                Store.record = {};
                Store.adminPermissionVisible = false;
            }
        });
    };

    render() {
        const PermBox = this.PermBox;

        return (
            <Modal
                visible
                width={1000}
                maskClosable={true}
                title="功能权限设置"
                className={styles.container}
                onCancel={() => Store.adminPermissionVisible = false}
                confirmLoading={Store.adminConfirmLoading}
                onOk={this.handleSubmit}>
                <Alert
                    closable
                    showIcon
                    type="info"
                    style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}}
                    message="小提示"
                    description={[<div key="1">功能权限仅影响页面功能，管理发布应用权限请在发布权限中设置。</div>,
                        <div key="2">权限更改成功后会强制属于该角色的账户重新登录。</div>]}/>

                <table border="1" className={styles.table}>
                    <thead>
                    <tr>
                        <th>模块</th>
                        <th>页面</th>
                        <th>功能</th>
                    </tr>
                    </thead>
                    <tbody>
                    {Store.allPermissionsReady && Store.permissionsReady && Store.allPermissions.map(mod => (
                        mod.pages.map((page, index) => (
                            <Fragment key={page.key}>
                                <tr>
                                    {index === 0 && <td rowSpan={mod.pages.length}>{mod.label}</td>}
                                    <td>
                                        <Checkbox
                                            onChange={e => this.handleAllCheck(e, mod.key, page.key,page.sub_type)}
                                            // defaultChecked={false}
                                        >
                                            {page.label}
                                        </Checkbox>
                                    </td>
                                    <td>
                                        <Row>
                                            {Array.isArray(page.perms) && page.perms.map(perm => (
                                                <Col key={perm.key} span={8}>
                                                    <PermBox sub_type={page.sub_type} mod={mod.key} page={page.key} perm={perm.key}>{perm.label}</PermBox>
                                                </Col>
                                            ))}
                                        </Row>
                                    </td>
                                </tr>
                            </Fragment>
                        ))
                    ))}

                    </tbody>
                </table>
            </Modal>
        );
    }
}

export default AdminPermissionForm1;
